{{ define "js" }}
  <script type="text/javascript" src="/js/datatables.min.js"></script>
  <script type="text/javascript" src="/js/datatable_input.js"></script>
  <script type="text/javascript" src="/js/datatable_num-html.js"></script>

  <script>
    $("#mempool").DataTable({
      searchDelay: 0,
      searching: true,
      pageLength: 25,
      data: {{ .Data }},
      deferRender: true,
      ordering: true,
      order: [[5, 'desc']],
      language: {
        paginate: {
          previous: "<",
          next: ">",
        },
      },
      columnDefs: [
        {
          targets: [0, 1, 2, 3, 4, 6],
          orderable: false
        },
        {
          type: 'num-html',
          targets: 5,
          orderable: true,
        }
      ],
    })
    document.getElementById("mempool-body").classList.remove("d-none")
  </script>
{{ end }}

{{ define "css" }}
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs4/dt-1.10.20/datatables.min.css" />
  <style>
    table.dataTable tbody td {
      vertical-align: middle;
    }
  </style>
{{ end }}

{{ define "content" }}
  {{ with .Data }}
    <div class="container mt-2">
      <div class="my-3">
        <div class="d-md-flex py-2 justify-content-md-between">
          <h1 class="h4 mb-1 mb-md-0">
            <span class="ml-1 mr-1"><i class="fas fa-cube mr-2"></i>Mempool Transactions</span>
          </h1>
          <nav class="d-flex flex-wrap-reverse flex-md-nowrap justify-content-center align-items-center" aria-label="breadcrumb">
            <ol style="white-space: nowrap;padding:0; background-color:transparent;" class="breadcrumb font-size-1 flex-nowrap mb-0" style="padding:0; background-color:transparent;">
              <li class="breadcrumb-item"><a href="/" title="Home">Home</a></li>
              <li class="breadcrumb-item active" aria-current="page">Mempool Transactions</li>
            </ol>
          </nav>
        </div>
      </div>

      <div class="card my-3 py-3">
        <div class="card-body p-0">
          <div class="table-responsive">
            <table class="table dataTable table-sm" id="mempool" style="width:100%">
              <thead>
                <tr role="row">
                  <th>Hash</th>
                  <th>From</th>
                  <th>To</th>
                  <th>Value</th>
                  <th>Gas Limit</th>
                  <th>Gas Price</th>
                  <th>Nonce</th>
                </tr>
              </thead>
              <tbody id="mempool-body" class="d-none"></tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  {{ end }}
{{ end }}
